<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<%@ include file="../common/tagincludes.jsp"%>
<%@ include file="../common/resourceincludes.jsp"%>
<script type="text/javascript" src="jquery/jquery-min.js"></script>
 <!-- <script type="text/javascript" src="jquery/jqgrid/jquery-1.5.2.min.js"></script> -->
<script type="text/javascript" src="jquery/jquery.tools.min.js"></script>

<script type="text/javascript" src="jquery/jqgrid/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jquery/jqgrid/jquery.jqGrid.min.js"></script>

<!-- <script type="text/javascript" src="modernizer/modernizr.custom.12725.js"></script> -->
<script type="text/javascript"
	src="jquery/jqueryui/jquery-ui-1.8.20.custom.min.js"></script>

<script type="text/javascript" src="app/Application.js"></script>
<script type="text/javascript" src="app/home.js"></script>
<script type="text/javascript" src="app/common/customvalidators.js"></script>

 <!-- Le styles -->

    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
       }
    </style>
   <!-- <link href="css/bootstrap-responsive.css" rel="stylesheet">-->
<script>
<%--$('.dropdown-toggle').dropdown();
$('#example').popover(animation);
$('.typeahead').typeahead(); --%>
</script>

	
</script>
</head>

<body>
	<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#"><img src="resources/images/NumReceiptLogo.jpg" width="237" height="18" longdesc="http://www.numreceipt.com"></a>
          <div class="nav-collapse">
            <ul class="nav pull-right">            
 
              <li class="active"><a href="#"><span class="add-on"> <i class="icon-white icon-Home"> </i></span>Home</a></li>
              <li ><a href="#about">How It Works</a></li>
                 <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      MobileApp
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Android</a></li>
      <li><a href="#" rel="popover" data-content="Blackberry App is coming soon......." data-original-title="Blackberry App">BlackBerry</a></li>
      <li><a href="#">iPhone</a></li>     
      <li><a href="#">iPad</a></li>
      <li><a href="#">WindowsPhone</a></li>
	  <li><a href="#">Symbian</a></li>      
      
    </ul>
  </li>
              <li><a href="#contact"> <span class="add-on"> <i class="icon-white icon-envelope"> </i></span> Contact Us</a></li>		  
            <li><form action="/Search" id="form-search" class="search-form-top">
          	<input type="text" class="input-search-top" placeholder="Search" name="search" onChange="$('#search-form').submit()">
          </form></li> 
          <li>
          Welcome &nbsp;<c:out								value="${userValue.firstName}"></c:out>
          </li>
          </ul>
      
		  </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
<div class="container-fluid">
<div class="row">
<div class="subnav">
  	<ul class="nav nav-pills">
  <li class="active">
    <a href="#" onclick="application.loadPage('rec/loadReceiptsViewPage')">
      <i class="icon-inbox"></i>
     Inbox
    </a>
  </li>
  <li>
    <a href="#" onclick="application.loadPage('user/edit')">
      <i class="icon-user"></i>
     Edit Profile
    </a>
  </li>
  <li>
    <a id="uploadReceipt" href="#" onclick="application.loadPage('rec/loadReceiptsCreatePage')">
      <i class="icon-upload" ></i>
     Upload Receipt
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-th-list"></i>
     Manual Receipt
    </a>
  </li>
  <li><sec:authorize access="hasRole('ADMIN')">
    <a href="#" onclick="application.loadPage('recCategoryTemplate/loadRecCategoryPage')">
      <i class="icon-barcode"></i>
     Receipt Category
    </a>
  </li>
    <li>
    <a href="#" onclick="application.loadPage('itemCategoryTemplate/loadItemCategoryPage')">
      <i class="icon-barcode"></i>
     Item Category
    </a> 
  </li>
  <li>
    <a href="#" onclick="application.loadPage('retailerTemplate/loadRetailerPage')">
      <i class="icon-cog"></i>
     Retailer
    </a>
  </li></sec:authorize>
   <li><sec:authorize access="hasRole('USER')">
    <a href="#" onclick="application.loadPage('recCategory/loadRecCategoryPage')">
      <i class="icon-barcode"></i>
     Receipt Category
    </a>
  </li>
    <li>
    <a href="#" onclick="application.loadPage('itemCategory/loadItemCategoryPage')">
      <i class="icon-barcode"></i>
     Item Category
    </a>
  </li>
  <li>
    <a href="#" onclick="application.loadPage('retailer/loadRetailerPage')">
      <i class="icon-cog"></i>
     Retailer
    </a>
  </li></sec:authorize>
    <li>
    <a href="#" onClick="application.loadPage('reports/categoryPie')">
      <i class="icon-list-alt"></i>
     Reports
    </a>
  </li>
     <li>
    <a href="#" onClick="alert('Coupons coming soon');application.loadPage('reports/categoryBar')">
      <i class="icon-picture"></i>
     Coupons 4 u
    </a>
  </li>
  <li><a href="<c:url value='/j_spring_security_logout'/> "> <i class="icon-remove-sign"></i>
  Logout</a>
</li>
</ul>
</div>
</div>
<div class="row">
<h2><div id="appPageHeading"></div></h2>
							 <div id="appMessageBar">
									<span  id="loadingIcon" hidden="true"><img height="2"
										width="2" alt="" src="resources/images/loading.gif"></span><span 
										id="errorIcon" hidden="true"><img height="12"
										width="12" alt="" src="resources/images/error.gif"></span><span 
										id="successIcon" hidden="true"><img height="12"
										width="12" alt="" src="resources/images/success.gif"> </span> <span class="label label-success"
										id="messageBar"></span>
								</div>
</div>
<div class="row">
        <div id="appBodyContent" class="span16">
          		<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        </div>
</div>        
</div>

<HR>

<footer id="footer" class="bar bottom">
	<div class="modal-footer">
		<div class="container">
			<div class="row">
				<div class="span3">
					<h4>NumReceipt</h4>
					<ul class="unstyled">
						<li><a href="/contact">Contact Us</a></li>
						<li><a href="/blog/">Blog</a></li>
						<li><a href="/partners">Partners</a></li>
						<li><a href="/pressresources">Press Resources</a></li>
                        <li><a href="/privacy">Privacy Policy</a></li>
					</ul>
				</div>

				<div class="span3">
					<h4>Mobile App</h4>
					<ul class="unstyled">
						<li><a href="/android">Android</a></li>
						<li><a href="/iphone">iPhone</a></li>
						<li><a href="/blackberry">BlackBerry</a></li>
						<li><a href="/windowsmobile">Windows Mobile</a></li>
					</ul>
				</div>
				
                      <div class="span3">
					<h4>Advertisers</h4>
					<ul class="unstyled">
						<li><a href="/android">Advertise With Us</a></li>
                    </ul>
				</div>
                <div class="span2">
                	<h4>Follow Us </h4>
	               	<ul class="unstyled"><li>
						<a href="http://twitter.com/numreceipt" class="social-icon twitter push-right-half">Twitter</a>
						<a href="http://www.facebook.com/numreceipt" class="social-icon facebook push-right-half">Facebook</a>             
                        </li>
					</ul>
                    <p id="copyright" class="clear push-up"> <small> &#169; Copyright 2012 <a href="https://www.skyvin.com/">Skyvin Inc.</a></small> </p></li>
				</div>   
			</div>
		</div>
	</div>
</footer>
 </div> <!-- /container -->

   <script src="jquery/bs/bootstrap-dropdown.js"></script>
   <script src="jquery/bs/bootstrap-tooltip.js"></script>
   <script src="jquery/bs/bootstrap-popover.js"></script>
   <script src="jquery/bs/bootstrap-button.js"></script>
    <script src="jquery/bs/bootstrap-typeahead.js"></script>
</body>
</html>